

<template>
  <!-- 退款/售后 -->
  <view class="Mall4j page">
    <view class="goods-list">

      <view v-for="(item, refundId) in list" :key="refundId" class="goods-item">
        <!-- <view class="shop-name">店铺：笑橙小店190904</view> -->
        <view v-if="item.orderItems.length==1" class="goods-msg-box">
          <!-- 图片 -->
          <view class="img-box">
            <image :src="item.orderItems[0].pic" />
          </view>
          <!-- 信息 -->
          <view class="goods-text">
            <view class="goods-title">{{ item.orderItems[0].prodName }}</view>
            <view class="goods-quantity">{{ i18n.quantity }}{{ item.orderItems[0].prodCount }}{{ i18n.piece }}</view>
          </view>
        </view>
        <view v-else class="goods-msg-box">
          <block>
            <view class="item-cont" :data-refundsn="item.refundSn" @tap="toRefundDetails">
              <scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false" class="categories">
                <block v-for="(prod, prodName) in item.orderItems" :key="prodName">
                  <view class="prod-pic">
                    <image v-if="prod.pic" :src="prod.pic" />
                    <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
                  </view>
                </block>
              </scroll-view>
            </view>
          </block>
        </view>
        <!-- 退款进度提示 -->
        <view class="goods-item-tips">
          <view class="rmb-icon">
            <!-- 仅退款 -->
            <image v-if="item.applyType == 1" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/rmb-icon.png" />
            <!-- 退货退款 -->
            <image v-if="item.applyType == 2" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/refunds.png" />
          </view>
          <!-- applyType  申请类型:1,仅退款,2退款退货 -->
          <!-- 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
          <view v-if="item.applyType == 1" class="refund-type">{{ i18n.refund01 }}</view>
          <view v-if="item.applyType == 2" class="refund-type">{{ i18n.refund02 }}</view>
          <view v-if="item.returnMoneySts == 1" class="refund-process">{{ i18n.refund1 }}</view>
          <view v-if="item.returnMoneySts == 2 && item.applyType == 1" class="refund-process">{{ i18n.refund21 }}</view>
          <view v-if="item.returnMoneySts == 2 && item.applyType == 2" class="refund-process">{{ i18n.refund22 }}</view>
          <view v-if="item.returnMoneySts == 3 && item.applyType == 2" class="refund-process">{{ i18n.refund3 }}</view>
          <view v-if="item.returnMoneySts == 4 && item.applyType == 2" class="refund-process">{{ i18n.refund4 }}</view>
          <view v-if="item.returnMoneySts == 5" class="refund-process">{{ i18n.refund5 }}</view>
          <view v-if="item.returnMoneySts == 6" class="refund-process">{{ i18n.refund6 }}</view>
          <view v-if="item.returnMoneySts == 7" class="refund-process">{{ i18n.refund7 }}</view>
          <view v-if="item.returnMoneySts == -1" class="refund-process">{{ i18n.refund_1 }}</view>
        </view>

        <!-- 查看详情btn -->
        <view class="item-bottom" :data-refundsn="item.refundSn" @tap="toRefundDetails">
          <text class="view-details">{{ i18n.seeDetails }}</text>
        </view>
      </view>

      <!-- 空 -->
      <empty v-if="list.length==0" />

    </view>
  </view>
</template>

<script>
// pages/afterSales/afterSales.js
var http = require('@/utils/http.js')
import empty from '@/components/empty-tips/index.vue'

export default {

  components: {
    empty
  },
  data () {
    return {
      list: [],
      current: 1,
      pages: 0,
      startTime: '',
      // 开始时间
      endTime: '' // 结束时间
      // orderItems: '',  //订单项

    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.myRefundOrder() // 退款订单列表
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.refundAfterSale
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('触底pages:', this.pages)
    if (this.current < this.pages) {
      this.setData({
        current: this.current + 1
      })
      this.myRefundOrder()
    } else {
      this.setData({
        loadAll: true
      })
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 我的退款订单列表
     */
    myRefundOrder: function (e) {
      var params = {
        url: '/p/orderRefund/list',
        method: 'GET',
        data: {
          current: this.current,
          size: 20,
          startTime: this.startTime,
          endTime: this.endTime
        },
        callBack: res => {
          console.log(res)
          var list = []
          if (res.current == 1) {
            list = res.records
          } else {
            list = this.list
            list = list.concat(res.records)
          }
          this.list = list
          this.pages = res.pages
          this.current = res.current
        }
      }
      http.request(params)
    },

    /**
     * 点击查看详情跳转页面
     */
    toRefundDetails: function (e) {
      var refundSn = e.currentTarget.dataset.refundsn
      console.log(refundSn)
      uni.navigateTo({
        url: '/pages/refund-details/refund-details?refundSn=' + refundSn
      })
    }
  }
}
</script>
<style scoped lang='scss'>
@import "./after-sales.css";
</style>
